<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="zh-cn">
  <head>
  	<base href="<%=basePath %>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="hmyuanblog 基于Material Design Lite样式设计">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>HMYUANBLOG</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="images/android-desktop.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
    <link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="shortcut icon" href="static/favicon.ico">

	<link href="http://cdn.bootcss.com/material-design-lite/1.3.0/material.blue-pink.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="http://cdn.bootcss.com/material-design-lite/1.3.0/material.min.js"></script>
    <script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><!-- 页面同步加载进度条 -->
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    
    <style>
/*滚动条样式*/
::-webkit-scrollbar:horizontal{ height: 4px;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background-color:#00aff0;}
::-webkit-scrollbar-thumb{background-color:rgb(255,64,129)}
::-webkit-scrollbar-thumb:hover {background-color:rgb(255,64,129)}
::-webkit-scrollbar-thumb:active {background-color:rgb(255,64,129)}
/* 设置布局变化的动画效果 */
.layoutmain,.layoutmain *{
    transition:all 0.2s ease;
    -moz-transition:all 0.2s ease; /* Firefox 4 */
    -webkit-transition:all 0.2s ease; /* Safari and Chrome */
    -o-transition:all 0.2s ease; /* Opera */
}
/* 菜单和内容的基本布局 */
.layoutcontent{
    overflow:auto;
    position:absolute;
    left:240px;
    top:64px;
    bottom:0px;
    _height:100%;
    width: calc(100% - 240px);
}
.layoutmenu{
    width:240px;
    overflow:auto;
    position:absolute;
    left:0;
    top:64px;
    bottom:0px;
    _height:100%;
    overflow:auto;
    background: #fff;
}
/* 菜单滚动条不显示 */
.layoutmenu::-webkit-scrollbar{width:0px;}
.layoutmenu::-webkit-scrollbar:horizontal{ height: 0px;}
/* 隐藏菜单 */
.menuhide .layoutmenu{
    left:-240px;
}
.menuhide .layoutcontent{
    width: 100%;
    left:0px;
}
/* 头部吸附按钮的位置 */
.topbutton{
    bottom: -27px;
    margin-bottom: 0px;
}
/* 头部logo显示 */
.mdl-layout__header-row .mdl-layout-title{
    height: 64px;
    background: url(http://hmyuan.com/kod/data/User/admin/home/desktop/UI/material/framaterial/images/framaterial_logo8.png) center center/75% no-repeat #f7f7f7;
    text-indent: -9999px!important;
    width: 160px;
    position: absolute;
}
/*布局适应小屏*/
@media all and (max-width: 768px) {
    .layoutmenu {
        width:90%
    }
    .layoutcontent{
        width: 100%;
        left:0px;
    }
    .menuhide .layoutmenu{
        left:-90%;
    }
}
/* 适应导航条变化 */
@media screen and (max-width: 1024px) {
    .layoutmenu {
        top:56px;
    }
    .layoutcontent{
        top:56px;
    }
    .mdl-layout__header-row .mdl-layout-title{
        width: 168px;
        height: 56px;
    }
}
/* 菜单样式 */
.layoutmenu .mdl-navigation {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.layoutmenu .mdl-navigation .mdl-navigation__link {
    display: block;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 16px 20px;
    margin: 0;
    color: #757575
}
.layoutmenu .mdl-navigation .mdl-navigation__link .material-icons{
    padding-right: 22px;
}
.layoutmenu .mdl-navigation .mdl-navigation__link:hover {
    background-color: #e0e0e0
}
.layoutmenu .mdl-navigation .mdl-navigation__link--current {
    background-color: #e0e0e0;
    color: #ff4081
}
/* 页面加载进度条的样式 */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ff4081;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
/* 向下隐藏布局 */
.layouthide .top100{
	top:100%;
	opacity:0.1;
}
/* 向左隐藏布局 */
.layouthide .left100{
	left:-100%;
	opacity:0.1;
}
  </style>

  </head>
  <body class="layouthide">
		<script>
			/* 控制菜单显示 */
            function menutogater(){
                if($(".layoutmain").hasClass("menuhide")){
                    $(".layoutmain").removeClass("menuhide");
                }else{
                    $(".layoutmain").addClass("menuhide");
                }
            }
			/* 内容延时显示 */
            $(function(){
            	setTimeout(function () { 
            		layouttarget();
                }, 120);
            });
            /* 隐藏和现实页面布局 */
            function layouttarget(){
            	if($("body").hasClass("layouthide")){
            		$("body").removeClass("layouthide");
                }else{
                    $("body").addClass("layouthide");
                }
            }
            $(function(){
            	/* a标签延时跳转 */
            	 $(".layouthideJump").mousedown(function(e){
            		 var $me = $(this);
            		 if(e.which==1){// 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
            			 layouttarget();
                     	 setTimeout(function () { 
                     		window.location.href=$me.attr('href');
                         }, 200);
	            	     return false;//阻止链接跳转
            		 }
            	 });
            });
        </script>
        <div class="layoutmain mdl-layout--fixed-header">
            <div class="layoutcontent top100">
                <div style="height:2000px;width:2000px;background: #555;">
                </div>
            </div>
            <div class="layoutmenu mdl-shadow--4dp left100">
                <div style='height:160px;background: url("http://hmyuan.com/kod/data/User/admin/home/desktop/UI/material/framaterial/images/header.png") 0% 0% / cover;'>
                </div>
                <nav class="mdl-navigation">
			      <a class="layouthideJump mdl-navigation__link mdl-navigation__link--current" href="index.jsp" ><i class="material-icons">&#xE88A;</i>首页</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE89F;</i>收藏集</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE886;</i>社群</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE7FD;</i>个人资料</a>
			    </nav>
            </div>
        	<header class="mdl-layout__header">
        	    <div onclick="menutogater();" class="mdl-layout__drawer-button  mdl-js-button mdl-js-ripple-effect"><i class="material-icons"></i></div>
                <!-- Top row, always visible -->
                <div class="mdl-layout__header-row">
                  <!-- Title -->
                  <a   href="index.jsp" class="layouthideJump mdl-layout-title ">Title</a>
                  <div class="mdl-layout-spacer"></div>
                  <!-- Colored FAB button with ripple -->
                  <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp topbutton">
                      <i class="material-icons">add</i>
                  </button>
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                              mdl-textfield--floating-label mdl-textfield--align-right">
                    
                    <label class="mdl-button mdl-js-button mdl-button--icon"
                           for="waterfall-exp">
                      <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                      <input class="mdl-textfield__input" type="text" name="sample"
                             id="waterfall-exp" />
                    </div>
                  </div>
                </div>
          </header>
        </div>
  </body>
</html>
